{% extends "base.html" %}
{% block content %}
<div class="container">
    <div class="text-end mb-4">
        <a href="/" class="btn btn-outline-primary">返回首页</a>
    </div>

    <h1 class="text-center mb-4">加密结果与分析</h1>

    <!-- 原始图像 -->
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="card-title">原始图像</h2>
            <div class="text-center mb-3">
                <img src="{{ url_for('static', filename='uploads/' + result_data.original_image) }}" alt="Original Image" class="img-fluid rounded" style="cursor: pointer;">
            </div>
            <div class="text-center mb-3">
                <a href="{{ url_for('static', filename='uploads/' + result_data.original_image) }}" download="original_image.png" class="btn btn-primary">下载原始图像</a>
            </div>
            <h3 class="mt-3">原始图像分析结果</h3>
            <p><strong>图像模式:</strong> {{ result_data.original_analysis.mode }}</p>
            <p><strong>信息熵:</strong> {{ result_data.original_analysis.entropy }}</p>
            <p><strong>相关性分析:</strong></p>
            <ul class="list-group mb-3">
                {% for corr in result_data.original_analysis.correlations %}
                <li class="list-group-item">
                    通道 {{ loop.index }} - 水平: {{ corr[0]|round(4) }}, 垂直: {{ corr[1]|round(4) }}, 对角: {{ corr[2]|round(4) }}
                </li>
                {% endfor %}
            </ul>
            <p><strong>统计信息:</strong></p>
            <ul class="list-group mb-3">
                {% for stat in result_data.original_analysis.statistics %}
                <li class="list-group-item">
                    通道 {{ loop.index }} - 均值: {{ stat[0]|round(2) }}, 方差: {{ stat[1]|round(2) }}
                </li>
                {% endfor %}
            </ul>
            <div class="text-center mb-3">
                <img src="{{ url_for('static', filename='uploads/' + result_data.original_analysis.histogram_path) }}" alt="Original Histogram" class="img-fluid rounded" style="cursor: pointer;">
            </div>
            <div class="text-center mb-3">
                <a href="{{ url_for('static', filename='uploads/' + result_data.original_analysis.histogram_path) }}" download="original_histogram.png" class="btn btn-primary">下载原始图像直方图</a>
            </div>
        </div>
    </div>

    <!-- RC4加密图像 -->
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="card-title">RC4加密图像</h2>
            <div class="text-center mb-3">
                <img src="{{ url_for('static', filename='uploads/' + result_data.rc4_encrypted_image) }}" alt="RC4 Encrypted Image" class="img-fluid rounded" style="cursor: pointer;">
            </div>
            <div class="text-center mb-3">
                <a href="{{ url_for('static', filename='uploads/' + result_data.rc4_encrypted_image) }}" download="rc4_encrypted_image.png" class="btn btn-primary">下载RC4加密图像</a>
            </div>
            <h3 class="mt-3">RC4加密图像分析结果</h3>
            <p><strong>图像模式:</strong> {{ result_data.rc4_encrypted_analysis.mode }}</p>
            <p><strong>信息熵:</strong> {{ result_data.rc4_encrypted_analysis.entropy }}</p>
            <p><strong>相关性分析:</strong></p>
            <ul class="list-group mb-3">
                {% for corr in result_data.rc4_encrypted_analysis.correlations %}
                <li class="list-group-item">
                    通道 {{ loop.index }} - 水平: {{ corr[0]|round(4) }}, 垂直: {{ corr[1]|round(4) }}, 对角: {{ corr[2]|round(4) }}
                </li>
                {% endfor %}
            </ul>
            <p><strong>统计信息:</strong></p>
            <ul class="list-group mb-3">
                {% for stat in result_data.rc4_encrypted_analysis.statistics %}
                <li class="list-group-item">
                    通道 {{ loop.index }} - 均值: {{ stat[0]|round(2) }}, 方差: {{ stat[1]|round(2) }}
                </li>
                {% endfor %}
            </ul>
            <div class="text-center mb-3">
                <img src="{{ url_for('static', filename='uploads/' + result_data.rc4_encrypted_analysis.histogram_path) }}" alt="RC4 Encrypted Histogram" class="img-fluid rounded" style="cursor: pointer;">
            </div>
            <div class="text-center mb-3">
                <a href="{{ url_for('static', filename='uploads/' + result_data.rc4_encrypted_analysis.histogram_path) }}" download="rc4_encrypted_histogram.png" class="btn btn-primary">下载RC4加密图像直方图</a>
            </div>

            <!-- RC4密钥敏感性分析 -->
            <h4 class="mt-3">RC4密钥敏感性分析</h4>
            <ul class="list-group mb-3">
                {% for i in range(result_data.channel_names|length) %}
                <li class="list-group-item">
                    {{ result_data.channel_names[i] }} 通道 - NPCR: {{ result_data.rc4_npcr_values[i]|round(6) }}%, UACI: {{ result_data.rc4_uaci_values[i]|round(6) }}%
                </li>
                {% endfor %}
            </ul>

            <!-- 峰值信噪比（PSNR） -->
            <h4 class="mt-3">峰值信噪比 (PSNR)</h4>
            <ul class="list-group mb-3">
                {% for i in range(result_data.channel_names|length) %}
                <li class="list-group-item">
                    {{ result_data.channel_names[i] }} 通道 - PSNR:
                    {% if result_data.rc4_psnr[i] is not none %}
                        {{ result_data.rc4_psnr[i]|round(2) }} dB
                    {% else %}
                        无数据
                    {% endif %}
                </li>
                {% endfor %}
            </ul>

            <!-- 卡方检验结果 -->
            <h4 class="mt-3">卡方检验结果</h4>
            <ul class="list-group mb-3">
                {% for i in range(result_data.channel_names|length) %}
                <li class="list-group-item">
                    {{ result_data.channel_names[i] }} 通道 - 卡方统计量:
                    {% if result_data.rc4_chi_square[i] is not none %}
                        {{ result_data.rc4_chi_square[i][0]|round(2) }}, p值: {{ result_data.rc4_chi_square[i][1]|round(4) }}
                    {% else %}
                        无数据
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <!-- RC4解密图像 -->
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="card-title">RC4解密图像</h2>
            <div class="text-center mb-3">
                <img src="{{ url_for('static', filename='uploads/' + result_data.rc4_decrypted_image) }}" alt="RC4 Decrypted Image" class="img-fluid rounded" style="cursor: pointer;">
            </div>
            <div class="text-center mb-3">
                <a href="{{ url_for('static', filename='uploads/' + result_data.rc4_decrypted_image) }}" download="rc4_decrypted_image.png" class="btn btn-primary">下载RC4解密图像</a>
            </div>
        </div>
    </div>

    <!-- LFSR加密图像 -->
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="card-title">LFSR加密图像</h2>
            <div class="text-center mb-3">
                <img src="{{ url_for('static', filename='uploads/' + result_data.lfsr_encrypted_image) }}" alt="LFSR Encrypted Image" class="img-fluid rounded" style="cursor: pointer;">
            </div>
            <div class="text-center mb-3">
                <a href="{{ url_for('static', filename='uploads/' + result_data.lfsr_encrypted_image) }}" download="lfsr_encrypted_image.png" class="btn btn-primary">下载LFSR加密图像</a>
            </div>
            <h3 class="mt-3">LFSR加密图像分析结果</h3>
            <p><strong>图像模式:</strong> {{ result_data.lfsr_encrypted_analysis.mode }}</p>
            <p><strong>信息熵:</strong> {{ result_data.lfsr_encrypted_analysis.entropy }}</p>
            <p><strong>相关性分析:</strong></p>
            <ul class="list-group mb-3">
                {% for corr in result_data.lfsr_encrypted_analysis.correlations %}
                <li class="list-group-item">
                    通道 {{ loop.index }} - 水平: {{ corr[0]|round(4) }}, 垂直: {{ corr[1]|round(4) }}, 对角: {{ corr[2]|round(4) }}
                </li>
                {% endfor %}
            </ul>
            <p><strong>统计信息:</strong></p>
            <ul class="list-group mb-3">
                {% for stat in result_data.lfsr_encrypted_analysis.statistics %}
                <li class="list-group-item">
                    通道 {{ loop.index }} - 均值: {{ stat[0]|round(2) }}, 方差: {{ stat[1]|round(2) }}
                </li>
                {% endfor %}
            </ul>
            <div class="text-center mb-3">
                <img src="{{ url_for('static', filename='uploads/' + result_data.lfsr_encrypted_analysis.histogram_path) }}" alt="LFSR Encrypted Histogram" class="img-fluid rounded" style="cursor: pointer;">
            </div>
            <div class="text-center mb-3">
                <a href="{{ url_for('static', filename='uploads/' + result_data.lfsr_encrypted_analysis.histogram_path) }}" download="lfsr_encrypted_histogram.png" class="btn btn-primary">下载LFSR加密图像直方图</a>
            </div>

            <!-- LFSR密钥敏感性分析 -->
            <h4 class="mt-3">LFSR密钥敏感性分析</h4>
            <ul class="list-group mb-3">
                {% for i in range(result_data.channel_names|length) %}
                <li class="list-group-item">
                    {{ result_data.channel_names[i] }} 通道 - NPCR: {{ result_data.lfsr_npcr_values[i]|round(6) }}%, UACI: {{ result_data.lfsr_uaci_values[i]|round(6) }}%
                </li>
                {% endfor %}
            </ul>

            <!-- 峰值信噪比（PSNR） -->
            <h4 class="mt-3">峰值信噪比 (PSNR)</h4>
            <ul class="list-group mb-3">
                {% for i in range(result_data.channel_names|length) %}
                <li class="list-group-item">
                    {{ result_data.channel_names[i] }} 通道 - PSNR:
                    {% if result_data.lfsr_psnr[i] is not none %}
                        {{ result_data.lfsr_psnr[i]|round(2) }} dB
                    {% else %}
                        无数据
                    {% endif %}
                </li>
                {% endfor %}
            </ul>

            <!-- 卡方检验结果 -->
            <h4 class="mt-3">卡方检验结果</h4>
            <ul class="list-group mb-3">
                {% for i in range(result_data.channel_names|length) %}
                <li class="list-group-item">
                    {{ result_data.channel_names[i] }} 通道 - 卡方统计量:
                    {% if result_data.lfsr_chi_square[i] is not none %}
                        {{ result_data.lfsr_chi_square[i][0]|round(2) }}, p值: {{ result_data.lfsr_chi_square[i][1]|round(4) }}
                    {% else %}
                        无数据
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <!-- LFSR解密图像 -->
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="card-title">LFSR解密图像</h2>
            <div class="text-center mb-3">
                <img src="{{ url_for('static', filename='uploads/' + result_data.lfsr_decrypted_image) }}" alt="LFSR Decrypted Image" class="img-fluid rounded" style="cursor: pointer;">
            </div>
            <div class="text-center mb-3">
                <a href="{{ url_for('static', filename='uploads/' + result_data.lfsr_decrypted_image) }}" download="lfsr_decrypted_image.png" class="btn btn-primary">下载LFSR解密图像</a>
            </div>
        </div>
    </div>
</div>

<!-- 图片放大容器 -->
<div id="image-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 1000; justify-content: center; align-items: center;">
    <img id="zoomed-image" src="#" alt="放大图像" style="max-width: 90%; max-height: 90%;">
</div>

<script>
    // 点击图片放大功能
    document.querySelectorAll('img').forEach(img => {
        img.addEventListener('click', function () {
            const zoomedImage = document.getElementById('zoomed-image');
            const imageOverlay = document.getElementById('image-overlay');
            zoomedImage.src = this.src;
            imageOverlay.style.display = 'flex';
        });
    });

    // 点击放大后的图片或背景关闭放大功能
    document.getElementById('image-overlay').addEventListener('click', function () {
        this.style.display = 'none';
    });
</script>
{% endblock %}
